<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="60%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      :disabled="!canEdit"
      v-loading="loading"
    >
      <el-form-item label="设备编码" prop="equipCode">
        <el-input
          type="text"
          v-model="form.equipCode"
          placeholder=""
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="设备名称" prop="equipName">
        <el-input
          type="text"
          v-model="form.equipName"
          placeholder=""
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="设备分类" prop="sortcodeLabel">
        <el-input
          type="text"
          v-model="form.sortcodeLabel"
          placeholder=""
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="所属工厂" prop="factoryDeptName">
        <el-input
          type="text"
          v-model="form.factoryDeptName"
          placeholder=""
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="所属车间" prop="workshopId">
        <el-select
          v-model="form.workshopId"
          placeholder="请选择所属车间"
          clearable
          @change="workshopChange"
        >
          <el-option
            v-for="item in workshopOptions"
            :key="item.workshopId"
            :label="item.workshopName"
            :value="item.workshopId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属产线" prop="lineId">
        <el-select
          v-model="form.lineId"
          placeholder="请选择所属产线"
          clearable
          @change="lineChange"
        >
          <el-option
            v-for="item in lineOptions"
            :key="item.lineId"
            :label="item.lineName"
            :value="item.lineId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联工位" prop="workStationIds">
        <el-select
          v-model="form.workStationIds"
          placeholder="请选择关联工位"
          clearable
          multiple
        >
          <el-option
            v-for="item in workStationOptions"
            :key="item.workStationId"
            :label="item.workStationName"
            :value="item.workStationId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联工序" prop="sectionNames">
        <el-input
          type="text"
          v-model="form.sectionNames"
          placeholder=""
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item
        label="设备运行状态对应的指标编码"
        prop="runStatusScadaPointCode"
        class="long-item"
      >
        <el-input
          type="text"
          v-model="form.runStatusScadaPointCode"
          clearable
          placeholder="请输入设备运行状态对应的指标编码"
        ></el-input>
      </el-form-item>
      <el-form-item label="设备重要等级" prop="levelCode">
        <el-select
          v-model="form.levelCode"
          clearable
          placeholder="请选择设备重要等级"
        >
          <el-option
            v-for="item in dict.equipmentLevel"
            :key="item.codevalue"
            :label="item.codename"
            :value="item.codevalue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否核心设备" prop="coreFlag">
        <el-select
          v-model="form.coreFlag"
          clearable
          placeholder="请选择是否核心设备"
        >
          <el-option
            v-for="item in dict.sys_yes_no"
            :key="item.codevalue"
            :label="item.codename"
            :value="item.codevalue"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        v-if="canEdit"
        type="primary"
        :loading="saveloading"
        @click="handleSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { checkPermi } from "@/utils/permission";
import WorkTree from "@/utils/workTree";
import { getEquipDetail, saveEquipDetail } from "@/api/equipMgmt/equipment";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: null,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    dictData: {
      type: Object,
      default: {
        sortcodeLabelMap: {},
      },
    },
  },
  dicts: ["equipmentLevel", "sys_yes_no"],
  data() {
    return {
      loading: false,
      form: {
        equipCode: null,
        equipName: null,
        sortcodeLabel: null,
        factoryDeptId: null,
        factoryDeptCode: null,
        factoryDeptName: null,
        workshopId: null,
        lineId: null,
        workStationIds: [],
        sectionNames: null,
        runStatusScadaPointCode: null,
        levelCode: null,
        coreFlag: null
      },
      rules: {
        workshopId: [
          { required: true, message: "请选择所属车间", trigger: "change" },
        ],
        lineId: [
          { required: true, message: "请选择所属产线", trigger: "change" },
        ],
      },
      workshopOptions: [],
      lineOptions: [],
      workStationOptions: [],
      saveloading: false,
      workTree: null,
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
    title() {
      if (this.disabled == true) {
        return "设备信息详情";
      }
      if (!!this.row) {
        return "编辑设备信息";
      }
      return "新增设备信息";
    },
    canEdit() {
      if (this.disabled == true) {
        return false;
      }
      if (this.row?.id) {
        return checkPermi(["equipMgmt:equipment:edit"]);
      }
      return true;
    },
  },
  created() {},
  methods: {
    handleClose() {
      this.$refs.ruleForm.resetFields();
    },
    handleOpen() {
      this.workTree = new WorkTree();

      this.loading = true;
      this.workTree
        .affterLoad()
        .then(() => {
          this.getDetails();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getDetails() {
      const id = this.row?.id || null;
      if (!id) {
        return;
      }
      this.loading = true;
      getEquipDetail(id)
        .then((res) => {
          const { sortcodeLabelMap } = this.dictData;
          const {
            equipCode,
            equipName,
            sortcode = "",
            bizDeptVo,
            factoryDeptId,
            factoryDeptCode,
            workshopId,
            lineId,
            workStationIds,
            sectionNames,
            runStatusScadaPointCode,
            levelCode,
            coreFlag
          } = res.data;
          this.form = {
            equipCode,
            equipName,
            sortcodeLabel: sortcodeLabelMap[sortcode],
            factoryDeptId,
            factoryDeptCode,
            factoryDeptName: bizDeptVo?.deptName || null,
            workshopId,
            lineId,
            workStationIds: workStationIds ? workStationIds.split(",") : [],
            sectionNames,
            runStatusScadaPointCode,
            levelCode,
            coreFlag
          };

          this.getBaseOption();
        })
        .catch(() => {
          this.form = {
            equipCode: null,
            equipName: null,
            sortcodeLabel: null,
            factoryDeptId: null,
            factoryDeptCode: null,
            factoryDeptName: null,
            workshopId: null,
            lineId: null,
            workStationIds: [],
            sectionNames: null,
            runStatusScadaPointCode: null,
            levelCode: null,
            coreFlag: null
          };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 根据工厂获取车间下拉框列表
    getBaseOption() {
      this.workshopOptions = this.workTree.getWorkshop({
        factoryDeptId: this.form.factoryDeptId,
      });
    },
    // 根据车间获取产线下拉框列表
    getLineOption(workshopId) {
      if (workshopId) {
        this.lineOptions = this.workTree.getProductionLine({
          workshopId,
        });
      } else {
        this.lineOptions = [];
      }
    },
    // // 根据产线获取工位下拉框列表
    getWorkStationOption(lineId) {
      if (lineId) {
        this.workStationOptions = this.workTree.getWorkStation({
          lineId,
        });
      } else {
        this.workStationOptions = [];
      }
    },
    // 车间变更
    workshopChange() {
      this.form.lineId = null;
      this.form.workStationIds = [];
      this.workStationOptions = [];
    },
    // 产线变更
    lineChange() {
      this.form.workStationIds = [];
      this.workStationOptions = [];
    },
    // 关联工序变更
    workSectionChange(value) {
      this.form.workStationIds = [];
    },
    handleSubmit() {
      this.$refs.ruleForm.validate((flag) => {
        if (flag) {
          this.saveloading = true;
          const form = this.form;
          const row = this.row;
          const param = {
            id: row.id,
            equipId: row.equipId,
            equipCode: row.equipCode,
            equipName: row.equipName,
            manufacturer: row.manufacturer,
            model: row.model,
            sortcode: row.sortcode,
            statecode: row.statecode,
            keepbranch: row.keepbranch,
            workshopId: form.workshopId,
            lineId: form.lineId,
            // workSectionId: form.workSectionId,
            workStationIds: form.workStationIds
              ? form.workStationIds.join(",")
              : "",
            factoryDeptId: row.factoryDeptId,
            factoryDeptCode: row.factorfactoryDeptCodeyDeptId,
            runStatusScadaPointCode: form.runStatusScadaPointCode,
            levelCode: form.levelCode,
            coreFlag: form.coreFlag
          };
          saveEquipDetail(param)
            .then((res) => {
              this.dialogVisible = false;
              this.saveloading = false;
              this.$emit("refresh");
            })
            .catch(() => {
              this.saveloading = false;
            });
        }
      });
    },
  },
  watch: {
    "form.workshopId": {
      handler(newVal) {
        this.getLineOption(newVal);
      },
    },
    "form.lineId": {
      handler(newVal) {
        this.getWorkStationOption(newVal);
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  .el-form-item {
    width: 49%;
  }
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
::v-deep .long-item {
  .el-form-item__label {
    line-height: 22px;
  }
}
</style>
